<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>margin-top 穿透传递问题及其解决方法</title>
		<style type="text/css">
			/* 父子元素中 margin-top 穿透传递问题：当子元素与父元素紧密相邻，且子元素设置了 margin-top 值，会带动父元素一起移动 */
			.outer {
				width: 200px;
				height: 200px;
				background-color: #85efff;
				margin: 10px;
			}

			.inner {
				width: 100px;
				height: 100px;
				background-color: #ffff7f;
				margin-top: 70px;
			}

			/*
				方案一：不让两者紧密相邻，如再增加一个盒子在两者之间或设置父盒子的 border-top 值等等
			*/
			.clearfix-1 {
				display: table;
			}

			/*
				方案二：开启BFC
			*/
			.clearfix-2 {
				overflow: auto;
			}

			/*
				方案三：利用 before 伪元素，原理同方案一
			*/
			.clearfix-3::before {
				content: "";
				display: table;
			}
		</style>
	</head>

	<body>
		<div class="outer ">
			<div class="clearfix-1"></div>
			<div class="inner"></div>
		</div>
		<div class="outer clearfix-2">
			<div class="inner"></div>
		</div>
		<div class="outer clearfix-3">
			<div class="inner"></div>
		</div>
	</body>
</html>
